<template>
  <div class="w1200">
    <div class="cat-list">
      <div class="cat-list-box" v-for="(item,index) of catName" :key="index">
        <div class="cat-item">{{item}}</div>
        <div class="cat-item-list">
          <span v-for="(it,index1) of catData" :key="index1" v-show="it.category==index">{{it.name}}</span>
        </div>
      </div>
    </div>
    <div></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      catData: [],
      catName: [],
    }
  },
  created() {
    this.Axios.get('https://api-music.zzgoodqc.cn/playlist/catlist').then(
      (response) => {
        this.catData = response.data.sub
        this.catName = response.data.categories
      }
    )
  },
  methods: {},
  components: {},
}
</script>

<style scoped>
.w1200 {
  width: 1200px;
  margin: 0 auto;
  font-family: PingFang SC, Arial, Microsoft YaHei, sans-serif;
  color: #333;
}
.cat-list {
  clear: both;
  height: 194px;
  background: lightblue;
}
.cat-item {
  width: 117.33px;
  font-weight: 700;
  margin-bottom: 10px;
}
.cat-item-list {
  width: 120px;
  height: 90px;
}
.cat-item-list span {
  display: block;
  width: 60px;
  float: left;
  height: 30px;
  line-height: 30px;
  font-style: normal;
  font-size: 14px;
  line-height: 26px;
  margin-top: 4px;
  cursor: pointer;
}
.cat-list-box {
  display: inline-block;
}
</style>
